<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">


<!-- 内容主体区域 -->
<div class="layui-row layui-pad15">
    <form class="layui-form" action="">
            <div class="layui-col-md12 layui-col-lh">
                <div class="layui-row ">
                     <div class="layui-col-xs3">
                        日期选择 ：
                     </div>
                     <div class="layui-col-xs8">
                         <div class="layui-form">
                             <div class="layui-inline" id="test-n1"></div>
                         </div>

                     </div>
                </div>
            </div>
            <div class="layui-col-md12 layui-col-lh">
                <div class="layui-row ">
                    <div class="layui-col-xs3">
                        时间选择：
                    </div>
                    <div class="layui-col-xs8">
                         <div class="layui-row layui-margin-bot3">
                             <div class="layui-col-xs3">07:30-08:30</div>
                             <div class="layui-col-xs3 layui-text-right">
                                 <a href="javascript:;" class="layui-btn-ty layui-zdy-bj  layui-selX">选择</a>
                             </div>
                             <div class="layui-col-xs6">
                                 <a href="javascript:;" class="layui-btn-ty layui-zdy-bj">
                                     已约0/配额20
                                 </a>
                             </div>
                         </div>
                        <div class="layui-row layui-margin-bot3">
                            <div class="layui-col-xs3">08:30-09:30</div>
                            <div class="layui-col-xs3 layui-text-right">
                                <a href="javascript:;" class="layui-btn-ty order-btn-tys layui-selX">选择</a>
                            </div>
                            <div class="layui-col-xs6">
                                <a href="javascript:;" class="layui-btn-ty layui-zdy-bj">
                                    已约0/配额20
                                </a>
                            </div>
                        </div>
                        <div class="layui-row layui-margin-bot3">
                            <div class="layui-col-xs3">09:30-10:30</div>
                            <div class="layui-col-xs3 layui-text-right">
                                <a href="javascript:;" class="layui-btn-ty order-btn-tys layui-selX">选择</a>
                            </div>
                            <div class="layui-col-xs6">
                                <a href="javascript:;" class="layui-btn-ty layui-zdy-bj">
                                    已约0/配额20
                                </a>
                            </div>
                        </div>
                        <div class="layui-row layui-margin-bot3">
                            <div class="layui-col-xs3">10:30-11:30</div>
                            <div class="layui-col-xs3 layui-text-right">
                                <a href="javascript:;" class="layui-btn-ty order-btn-tys layui-selX">选择</a>
                            </div>
                            <div class="layui-col-xs6">
                                <a href="javascript:;" class="layui-btn-ty layui-zdy-bj">
                                    已约0/配额20
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12  layui-text-center layui-col-lh order-margin1">
                <a href="javascript:;" class="layui-q-c layui-zdy-bj">提交</a>
            </div>
    </form>


</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //日历直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            ,position: 'static'
            ,showBottom: false
            ,theme: '#58C0E3'
        });
    });


    //切换选择按钮
    $(function () {
        $('.layui-selX').click(function () {
              $('.layui-selX').removeClass('layui-zdy-bj').addClass('order-btn-tys');
              $(this).addClass('layui-zdy-bj').removeClass('order-btn-tys');
        });
    });
</script>


